<!--
 * @Description: 
 * @Author: Dxcr
 * @Date: 2022-11-22 15:35:17
 * @LastEditTime: 2022-11-23 16:11:50
 * @LastEditors: Dxcr
-->
<template>
    <div class="rightbutton_icontainer">
        <div class="btn_bar">
            <div class="dxcr_btn">
                <div class="btn_bg" :class="{ btn_check: data.btntype }" @click='clickBtn()'>管道类型</div>
            </div>
            <div class="dxcr_btn">
                <div class="btn_bg" :class="{ btn_check: !data.btntype }" @click='clickBtn()'>管道介质</div>
            </div>
        </div>
    </div>
</template>
<script setup>
import {
    defineComponent,
    ref,
    reactive,
    computed,
    toRefs,
    onMounted
} from 'vue'
import { useRouter, useRoute } from 'vue-router';

import mitt from '@/utils/mitt.js'

const getRoute = useRoute()
const router = useRouter()
const data = reactive({
    btntype: true,
})
onMounted(() => {
})

function clickBtn() {
    // data[type] = !data[type]
    if(data.btntype){
		data.btntype = false;
    }else{
		data.btntype = true;
	}
}
</script>
<style lang="scss" scoped>
.rightbutton_icontainer {
    //background: url(/src/assets/images/button_bar.png);
    background-size: 100% 100%;
    //width: 100%;
    //display: flex;
    align-items: center;
    justify-content: center;
    height: 10rem;

    .btn_bar {
        align-items: center;
        position: absolute;
        justify-content: center;
        top: -20rem;
    }

    .dxcr_btn {
        cursor: pointer;
        flex: 1;
        width: 288px;
        height: 68px;
        margin: 3.2rem;
        font-size: 3.2rem;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        z-index: 1;
    }

    .btn_bg {
        transition :all 0.3s;
        position: absolute;
        z-index: 9;
        background-image: url(@/assets/uncelect.png);
		background-size: cover;
        width: 288px;
        height: 68px;
        display: flex;
        justify-content: center;
        //padding-top: 15px;
		line-height: 68px;
		font-size:26px;
		color: #c8d0db;
    }

    .btn_check {
        background-image: url(@/assets/celect.png) !important;
		color: #fff !important;
    }


}

:deep {}

@keyframes btnAnimation {
	0% { background-position: 0px 0px; }
	1.35% { background-position: -280px 0px; }
	2.70% { background-position: -560px 0px; }
	4.05% { background-position: -840px 0px; }
	5.41% { background-position: -1120px 0px; }
	6.76% { background-position: -1400px 0px; }
	8.11% { background-position: -1680px 0px; }
	9.46% { background-position: -1960px 0px; }
	10.81% { background-position: -2240px 0px; }
	12.16% { background-position: -2520px 0px; }
	13.51% { background-position: -2800px 0px; }
	14.86% { background-position: -3080px 0px; }
	16.22% { background-position: -3360px 0px; }
	17.57% { background-position: -3640px 0px; }
	18.92% { background-position: -3920px 0px; }
	20.27% { background-position: -4200px 0px; }
	21.62% { background-position: -4480px 0px; }
	22.97% { background-position: -4760px 0px; }
	24.32% { background-position: -5040px 0px; }
	25.68% { background-position: -5320px 0px; }
	27.03% { background-position: -5600px 0px; }
	28.38% { background-position: -5880px 0px; }
	29.73% { background-position: -6160px 0px; }
	31.08% { background-position: -6440px 0px; }
	32.43% { background-position: -6720px 0px; }
	33.78% { background-position: -7000px 0px; }
	35.14% { background-position: -7280px 0px; }
	36.49% { background-position: -7560px 0px; }
	37.84% { background-position: -7840px 0px; }
	39.19% { background-position: -8120px 0px; }
	40.54% { background-position: -8400px 0px; }
	41.89% { background-position: -8680px 0px; }
	43.24% { background-position: -8960px 0px; }
	44.59% { background-position: -9240px 0px; }
	45.95% { background-position: -9520px 0px; }
	47.30% { background-position: -9800px 0px; }
	48.65% { background-position: -10080px 0px; }
	50.00% { background-position: -10360px 0px; }
	51.35% { background-position: -10640px 0px; }
	52.70% { background-position: -10920px 0px; }
	54.05% { background-position: -11200px 0px; }
	55.41% { background-position: -11480px 0px; }
	56.76% { background-position: -11760px 0px; }
	58.11% { background-position: -12040px 0px; }
	59.46% { background-position: -12320px 0px; }
	60.81% { background-position: -12600px 0px; }
	62.16% { background-position: -12880px 0px; }
	63.51% { background-position: -13160px 0px; }
	64.86% { background-position: -13440px 0px; }
	66.22% { background-position: -13720px 0px; }
	67.57% { background-position: -14000px 0px; }
	68.92% { background-position: -14280px 0px; }
	70.27% { background-position: -14560px 0px; }
	71.62% { background-position: -14840px 0px; }
	72.97% { background-position: -15120px 0px; }
	74.32% { background-position: -15400px 0px; }
	75.68% { background-position: -15680px 0px; }
	77.03% { background-position: -15960px 0px; }
	78.38% { background-position: -16240px 0px; }
	79.73% { background-position: -16520px 0px; }
	81.08% { background-position: -16800px 0px; }
	82.43% { background-position: -17080px 0px; }
	83.78% { background-position: -17360px 0px; }
	85.14% { background-position: -17640px 0px; }
	86.49% { background-position: -17920px 0px; }
	87.84% { background-position: -18200px 0px; }
	89.19% { background-position: -18480px 0px; }
	90.54% { background-position: -18760px 0px; }
	91.89% { background-position: -19040px 0px; }
	93.24% { background-position: -19320px 0px; }
	94.59% { background-position: -19600px 0px; }
	95.95% { background-position: -19880px 0px; }
	97.30% { background-position: -20160px 0px; }
	98.65% { background-position: -20440px 0px; }
	100.00% { background-position: -20720px 0px; }
}


</style>